<template>
    <div class="f2f-container">
      <div v-if="isRtcMatch">
        <div id="mainPlayAreaId">
          <!--     播放主区域     -->
        </div>
        <div id="smallPlayAreaId">
          <!--     播放小区域     -->
        </div>
        <div class="patient-info">
          <div>
            患者信息
          </div>
          <div class="action-bar">
            <button @click="doJoinRoom">加入房间</button>
            <button @click="doLeaveRoom">离开房间</button>
          </div>
        </div>
      </div>
      <div v-else class="error-msg">
        <div>
          <div>当前浏览器不支持远程视频音频对话, 请下载谷歌浏览器 (Chrome73或以上版本)</div>
          <a target="_blank" href="https://www.google.cn/chrome/">点击这里下载最新版本</a>
        </div>
      </div>
    </div>
</template>

<script>
// import HRTC from 'hrtc'
const HRTC = require('hrtc')
const HRTC_APP_ID = '5fd093b419d2a9b6f835db46'
const HRTC_APP_DOMAIN = '5fd093b419d2a9b6f835db46.cloudrtc.myhuaweicloud.com'
export default {
  name: 'CmpTtcFace2Face',
  data () {
    return {
      isRtcMatch: false, // 当前浏览器版本是否满足要求
      client: null // HRTC client
    }
  },
  computed: {
    xxx: function () {
      return ''
    }
  },
  mounted () {
    console.log('========HRTC版本: ', HRTC.VERSION)
    const checResult = HRTC.checkSystemRequirements()
    checResult.then((info) => {
      console.log('========OK: ', info)
      this.isRtcMatch = info
    }).catch(err => {
      console.log('========Failed', err)
      this.isRtcMatch = false
    })
  },
  methods: {
    doJoinRoom () {
      const config = {
        appId: HRTC_APP_ID,
        domain: HRTC_APP_DOMAIN
      }
      this.client = HRTC.createClient(config)
      const signature = ''
      const ctime = parseInt((new Date()).getTime() + '') + 60 * 60 * 24
      const option = {userId: 'UserId1100110', userName: 'Alan', signature: signature, ctime: ctime, role: 0}
      console.log('========加入房间参数: ' + JSON.stringify(option))
      const roomId = '202254'
      const joinResult = this.client.join(roomId, option)
      console.log('========加入房间中...')
      joinResult.then(resp => {
        console.log('========加入房间成功: ', resp)
        let stream = HRTC.createStream({audio: true, video: true})
        stream.initialize().then(() => {
          this.client.publish(stream)
          stream.play('smallPlayAreaId', {muted: true}) // 播放本地流(我的视频)
        })
      }).catch(error => {
        console.log('========加入房间成功失败: ', error)
      })

      // 监听
      this.client.on('stream-added', (event) => {
        const stream = event.stream
        this.client.subscribe(stream, {video: true, audio: true})
      })

      // 监听远端播放流
      this.client.on('stream-subscribed', (event) => {
        const stream = event.stream
        stream.play('mainPlayAreaId', {objectFit: 'contain', muted: true})
      })

      // 监听远端离开房间
      this.client.on('peer-leave', (event) => {
        // event: {userId: "sds", userName: "sds", reason: 0}
        console.log(`${event.userName}里面房间了(UserID: ${event.userId})`)
      })
    },
    doLeaveRoom () {
      if (this.client == null) {
        return false
      }
      this.client.unsubscribe().then(() => {
      }).catch(err => {
        console.warn('unsubscribe', err)
      })
      this.client.unpublish().then(() => {
      }).catch(err => {
        console.warn('unpublish', err)
      })
      this.client.leave()
    },
    printDeviceInfo () {
      // microphoneId
      const queryMicrophones = HRTC.getMicrophones()
      queryMicrophones.then(resp => {
        console.log('========getMicrophones: ', resp)
      }).catch((err) => {
        console.warn('getMicrophones: ', err)
      })

      // cameraId
    }
  }
}
</script>

<style scoped>
  button {
    padding: 6px;
    border: 1px solid #F5F5F5;
    border-radius: 4px;
    font-size: 12px;
  }
  button:hover {
    color: green;
  }
  .f2f-container {
    background-color: white;
    width: 800px;
    height: 500px;
    display: inline-block;
    position: relative;
    overflow: hidden;
  }
  #mainPlayAreaId {
    margin-right: 201px;
    height: 500px;
    background-color: #F0F0F0;
  }
  #smallPlayAreaId {
    position: absolute;
    top: 16px;
    right: 216px;
    width: 100px;
    height: 100px;
    border: 1px solid #F5F5F5;
    border-radius: 4px;
    background: white;
  }
  .patient-info {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
  }
  .action-bar {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    text-align: center;
    padding-bottom: 8px;
    padding-top: 8px;
    border-top: 1px solid #F5F5F5;
  }
  .error-msg {
    text-align: center;
    color: red;
    height: 100%;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .error-msg a {
    margin-top: 10px;
    display: inline-block;
    color: green;
    text-decoration: underline;
  }
</style>
